<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>分享</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>

    <style type="text/css">
    	.box_img{
    		/*width: 100%;
    		height: 100%;*/
    	}
    	.box_img img{
    		width:100%;
    		height: 100%;
    	}
    	.main{
    		
    	}
    	.main h3{
    		margin: 16px 12px;
    		font-size: 18px;
    	}
    	.main p {
    		margin: 0 12px;
    		font-size: 14px;
    		line-height: 24px;
    	}
    	.qr_code{
    		width: 100%;
    		height: 150px;
    		margin-top: 38px;
    		display: flex;
    		justify-content: center;
    	}
    	.qr_code div{
    		width: 150px;
    		height: 100%;
    	}
    	.qr_code div img{
    		width: 100%;
    		height: 100%;
    	}
    	.share_box{
    		width: 100%;
    		height: 48px;
    		background-color: #ffaa56;
    		margin-top: 20px;
    	}
    	.share_box input{
    		width: 100%;
    		height: 100%;
    		border: none;
    		background-color: transparent;
    		color: #FFFFFF;
    		font-size: 16px;
    	}
    	/*分享*/
    	.share{
    		width: 100%;
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		background-color: #FFFFFF;
    		z-index: 99;
    	}
    	.sort{
    		width: 100%;
    		height: 84px;
    		padding-top: 12px;
    	}
    	.sort li{
    		width: 25%;
    		float: left;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    	}
    	.sort li span,.sort li img{
    		display: block;
    	}
    	.sort li img{
    		width: 38px;
    		height: 38px;
    	}
    	.sort li span{
    		margin-top: 12px;
    		margin-bottom: 12px;
    		font-size: 12px;
    	}
    	.footer{
    		width: 100%;
    		/*height: ;*/
    		padding-top: 14px;
    		padding-bottom: 14px;
    		border-top: 2px solid #cccccc;
    		font-size: 14px;
    	}
    	.footer input{
    		width: 100%;
    		text-align: center;
    		border: none;
    		background-color: transparent;
    	}
    	/*遮罩层样式*/
    	.zzc{
    		width: 100%;
    		height: 100%;
    		position: fixed;
    		top: 0;
    		left: 0;
    		background: rgba(000,000,000,0.3);
    		
    	}
    </style>
    
</head>
<body style="width: 100%;height: 100%;">
	<div class="box">
		<div class="box_img">
			<img src="img/banner.png"/>
		</div>
		<div class="qr_code">
			<div>
				<!--<img src="img/code.png"/>-->
				    <div id="qrcodeTable"></div>
				    <div> <center>你的邀请码：<span id="code"></span></center></div>
			</div>
		</div>
		<div class="main">
			<!--<h3>邀请规则</h3>
			<p>1、你邀请来的每一个好友，只要注册并登陆APP，你就能获得10积分奖励，邀请人数无上限</p>
			<h3>邀请方式</h3>
			<p>1、点击下方“邀请好友得奖励”按钮分享给好友，好友注册成功，并下载登录APP</p>
			<p>2、好友下载APP，注册账号时，填写您的邀请码注册成功</p>
			<p>3、好友扫码下方二维码，注册账号成功，并下载登录APP</p>-->
		</div>
		
		<!--<div class="share_box">
			<input type="button" id="share" onclick="inviteFriends()" value="邀请好友得奖励" />
		</div>-->
	</div>
	<!--分享-->
	<!--<div id="showOrHide" class="show" style="display: none;">
		<div class="share">
			<ul class="sort">
				<li>
					<img src="img/weChat.png"/>
					<span>微信</span>
				</li>
				<li>
					<img src="img/contection.png"/>
					<span>朋友圈</span>
				</li>
				<li>
					<img src="img/QQ.png"/>
					<span>QQ好友</span>
				</li>
				<li>
					<img src="img/weibo.png"/>
					<span>新浪微博</span>
				</li>
			</ul>
			<div class="footer">
				<input type="button" onclick="cancel()" value="取消" />
			</div>
		</div>
		<div class="zzc"></div>
	</div>-->
	
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.qrcode.js" ></script>
    <script type="text/javascript" src="js/qrcode.js" ></script> 
    <script type="text/javascript" src="js/utf.js" ></script>
<script type="text/javascript">
    
	function GetQueryString(name)
	{
	     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	     var r = window.location.search.substr(1).match(reg);
	     if(r!=null)return  unescape(r[2]); return null;
	}
	$(function(){		
		//页面内容
		$.ajax({
				contentType: "application/json",
				type:"GET",
				url:"/shop-cloud-api/api/getInviteConfig",
				async:true,
				success: function (data)
		        {
		        	$(".main").append(data);
		        }
					        
		});

	});
	
	
	
	
	
	
	
	
    var code = GetQueryString("code");
    $('#code').text(code);
    var userId = GetQueryString("userId");
        // 调用方法
        jQuery('#qrcodeTable').qrcode({
		    	 <!--二维码生成方式 -->
		         render    : "table",     
		         <!-- 二维码内容  -->
		         text    : "http://116.62.63.173:9080/shop-cloud-api/invite.html?codeText="+code+"&userId="+userId,
		         width : "150",               //二维码的宽度
                 height : "150",
		    });    



	function inviteFriends(){
		$("#showOrHide").css("display","block");
	}
	function cancel(){
		$("#showOrHide").css("display","none");
	}
	$(".zzc").on("click",function(){
		$("#showOrHide").css("display","none");
	})
</script>
</html>